import {useCallback, useState, useTransition} from "react";

export default function TransitionCase() {
  const [inputValue, setInputValue] = useState("");
  const [recommendList, setRecommendList] = useState([]); // 啥推荐都没有
  const [isPending, startTransition] = useTransition();
  const handleChange = useCallback((event) => {
    setInputValue(event.target.value)
    // 很多时候往往在我们设置完inputValue的值以后 会做一些额外的事情
    // 注册用户名 会有格式限制 那这个我们会先到本地校验一次这个用户名是否合法
    // 为啥要本地校验 后端也会给校验
    // 因为本地校验了是不是就不用产生额外的网络请求了 后端为什么要做校验 【后端一定要校验的 但是不是为了你前端服务的】
    // 后端为校验是为了别人绕过前端直接请求他的API 是为了数据的安全性和完整性 postman
    // 那我们有一个需求 就是本地校验完如果不合法 那么我们就推荐给他几个合法的用户名
    // 那这些合法的用户名都是要经过运算

    // 我们默认他永远不合格
    // 生成推荐数据

    // 假设一个点： 我们生成推荐数据这个运算要500ms
    startTransition(() => {
      const _innerRecommendList = []
      for (let i = 0; i < 20000; i++) {
        _innerRecommendList.push(`${event.target.value}_${i}_rec`)
      }
      setRecommendList(_innerRecommendList)
    })
  }, [])
  return (
    <div>
      <input value={inputValue} onChange={handleChange}/>
      {
        isPending ? <div>正在计算中</div> :
          (recommendList.map(elm =>
            <div>{elm}</div>
          ))
      }
    </div>
  )
}